<template>
	<view>
		<view v-if="PageCur == 'order'">
			<scroll-view scroll-x class="bg-white nav fixed" scroll-with-animation :scroll-left="scrollLeft">
				<view class="cu-item" :class="'pending'==TabCur?'text-green cur':''" @tap="tabSelect"
					:data-id="'pending'">
					<view>
						<view class="cuIcon-cu-image">
							已接单
							<!-- <view class="tab cu-tag badge">99</view> -->
						</view>
					</view>
				</view>
				<!-- 				<view class="cu-item" :class="'doing'==TabCur?'text-green cur':''" @tap="tabSelect" :data-id="'doing'">
					待接单
				</view> -->
			</scroll-view>
			<view v-if="'pending'==TabCur">
				<view class="padding text-left">
					<view v-for="(item,index) in orders" :key="index"
						class="padding-xs radius shadow bg-white order-item">


						<view class="flex solid-bottom padding-sm justify-between">
							<view class="order-equip">{{item.equipType}}-{{item.equipBrand}}-{{item.equipNum}}</view>
							<view class="padding-xs">
								<view class='cu-tag bg-orange' v-if="item.orderStatus === '0'">待接单</view>
								<view class='cu-tag bg-olive' v-else-if="item.orderStatus === '1'">已接单</view>
								<view class='cu-tag bg-grey' v-else-if="item.orderStatus === '2'">已结单</view>
								<view class='cu-tag bg-grey' v-else>未知</view>
							</view>
						</view>

						<view class="order-problem-info padding-lg">

							<view class="text-sm">
								<text class="text-grey">{{item.problemInfo}}</text>
							</view>
						</view>

						<view class="flex padding-sm justify-between solid-top">
							<view>
								<view class="order-mobile padding-sm"><text class="lg text-gray cuIcon-mobile"></text>
									{{item.mobileNum}}
								</view>
								<view class="order-address padding-sm " @tap="toOrderMap(item)">
									<text class="lg text-gray cuIcon-location"></text>
									{{item.locationAddress}}
								</view>
							</view>
							<view>
								<view class="padding-sm text-right">

									<button v-if="item.orderStatus === '1'" class="cu-btn bg-grey shadow" @click="jd(item)">结单</button>
								</view>
							</view>
						</view>



					</view>
					<view class="padding-xl"> </view>
				</view>
			</view>
			<view v-if="'doing'==TabCur" class="bg-grey padding margin text-center">
				<button class="cu-btn" @click="callFlutter('refresh:ads')">刷新</button>
				<button class="cu-btn" @click="callFlutter('logout:asda')">退出登录</button>
			</view>
		</view>

		<view class="cu-modal" :class="modal.show === true?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{modal.title}}</view>
					<view class="action" @tap="modal.show = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					{{modal.message}}
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="modal.show=false">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="confirmJd()">确定</button>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userOrdersApi,
		userOrderUpdateApi
	} from "../../api/order.js"
	export default {
		name: "task",
		data() {
			return {
				modal: {
					show: false,
					type: "jd",
					title: "提示",
					message: "详细信息"
				},
				dotStyle: false,
				towerStart: 0,
				direction: '',
				scrollLeft: 0,
				PageCur: "order",
				TabCur: 'pending',
				orders: []
			}
		},
		onLoad() {

		},
		mounted() {
			this.loadUserOrders();
		},
		methods: {
			jd(item) {
				this.modal = {
					item: item,
					show: true,
					type: "jd",
					title: "结单",
					message: `${item.problemInfo}?`
				}
			},
			hideModal() {
				this.modal = {
					show: false,
					type: "jd",
					title: "信息",
					message: "细节"
				}
			},
			confirmJd() {
			
				let _this = this;
				let item = _this.modal.item;
				if (!item) {
					_this.hideModal();
					return
				}
				item.orderStatus = "2"

				userOrderUpdateApi(item).then(res => {
					_this.hideModal();
					uni.showToast({
						duration: 2000,
						title: "操作成功"
					})
					_this.loadUserOrders();
				}).catch(e => {

				})
			},
			toOrderMap(item){
				let encodeData = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url:`/pages/task/oderMap/index?encodeData=${encodeData}`
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			loadUserOrders() {
				let _this = this;
				uni.showLoading()
				userOrdersApi({}).then(res => {
					if (res && res.data) {
						_this.orders = res.data.records
					}
					uni.hideLoading()
				})
			},
			callFlutter() {
				// 检查FlutterWebViewChannel是否存在
				// 检查Android是否存在
				if (window.Android) {
					// 发送消息到Flutter
					window.Android.updateToken("");
				}
				//在起始页面跳转到test.vue页面并传递参数
				uni.redirectTo({
					url: '/pages/login/index'
				});
			}
		}
	}
</script>

<style>
	.tab.cu-tag.badge {
		position: relative;
	}

	.order-item {
		margin-top: 1rem;
	}

	.order-equip {
		font-weight: bold;
	}

	.order-address,
	.order-mobile {
		padding-top: 0px;
		font-size: 22rpx;
	}

	.order-problem-info {
		font-size: 25rpx;
	}
</style>